//账期申请
import { useState, useEffect } from 'react';
import { Button, Input, Form, InputNumber, Radio, Select, Alert } from 'antd';
import CommonModal from '@/components/CommonModal';
import CommonLoading from '@/components/CommonLoading';
import { useNavigate } from 'react-router-dom';
import {
  contractExist,
  queryListByStoreName,
  queryAlipayCertificationget,
} from '../service';
import styles from '../index.module.less';

let timeout;

const { Option } = Select;

const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 10 },
};

const FormItemLayout = {
  wrapperCol: {
    span: 18,
    offset: 4,
  },
};

const tailFormItemLayout = {
  wrapperCol: {
    span: 18,
    offset: 4,
  },
};

//获取供应商接口
function fetch(value, callback) {
  if (timeout) {
    clearTimeout(timeout);
    timeout = null;
  }
  async function fake() {
    const res = await queryListByStoreName({
      storeName: value,
    });
    if (res.success) {
      const {
        data: { records },
      } = res;
      callback(records);
    } else {
      callback([]);
    }
  }
  timeout = setTimeout(fake, 300);
}

const ApplyPeriod = ({
  visible,
  //   userInfo = {},
  recordData = {},
  handleCancel,
  handleOk,
}) => {
  const [form] = Form.useForm();
	const navigate = useNavigate();
  //查看账期条款内容
  const [showContent, setShowContent] = useState(false);

  //设置供应商信息
  const [storeObj, setStoreObj] = useState({});

  //供应商下拉列表数据
  const [storeList, setStoreList] = useState([]);

  //供应商的默认value值
  const [value, setValue] = useState('');
  //列表认证数据
  const [userInfo, setUserInfo] = useState({});

  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (visible) {
      getAlipayCertificationget();
      getInitialData();
    }
  }, [visible]);

  useEffect(() => {
    form.resetFields();
  }, [userInfo, visible]);

  // 获取认证信息
  const getAlipayCertificationget = async () => {
    setLoading(true);
    setUserInfo({});
    const { success, data = {} } = await queryAlipayCertificationget();
    if (success) {
      setUserInfo(data);
    }
    setLoading(false);
  };

  const getInitialData = async () => {
    setLoading(true);
    const res = await queryListByStoreName({
      storeName: '',
      current: 1,
      size: 3000,
    });
    if (res.success) {
      const {
        data: { records },
      } = res;
      setStoreList(records);
    }
    setLoading(false);
  };

  //搜索供应商数据
  const handleSearch = (value) => {
    fetch(value, (data) => {
      setStoreList(data);
    });
  };

  //判断是否已经存在申请或者生效的合同
  const handleChange = async (value, option) => {
    setLoading(true);
    setValue(value);
    setStoreObj(option);
    setLoading(false);
  };

  //提交
  const onOk = () => {
    form
      .validateFields()
      .then((value) => {
        handleOk(value, storeObj);
        // setStoreObj({});
      })
      .catch((err) => {
        console.log(err);
      });
  };

  //取消
  const onCancel = () => {
    handleCancel();
    setStoreObj({});
  };

  //点击跳转认证事件
  const personageClick = () => {
    navigate('/account/personage', {
			state: {
				name: 'zx',
			}
    });
    handleCancel();
  };

  const options = storeList.map((d) => (
    <Option value={d.memberId} key={d.storeId}>
      {d.storeName}
    </Option>
  ));

  return (
    <>
      <CommonModal
        title="账期申请"
        visible={visible}
        footer={[
          <Button onClick={onCancel} key="cancel">
            取消
          </Button>,
          <Button onClick={onOk} key="confirm" type="primary">
            确定
          </Button>,
        ]}
        onCancel={onCancel}
        width={548}
      >
        <Form
          {...layout}
          form={form}
          name="apply-period"
        //   className="search-form-style"
          style={{ marginBottom: '16px' }}
          initialValues={{
            realName: userInfo?.realName,
            userPhone: userInfo?.userPhone,
            quota: recordData?.quota,
            timePeriod: recordData?.timePeriod,
            memberId: recordData?.memberId,
          }}
        >
          <Form.Item
            label="选择供应商"
            name="memberId"
            rules={[
              { required: true, message: '请选择供应商!' },
              () => ({
                async validator(rule, value) {
                  if (value) {
                    const { data, success } = await contractExist({
                      memberId: value,
                    });
                    if (success) {
                      if (data) {
                        return Promise.reject(
                          '该供应商已经申请过账期，不要重复申请'
                        );
                      }
                      return Promise.resolve();
                    }
                  }
                  return Promise.resolve();
                },
              }),
            ]}
          >
            <Select
              style={{ width: '300px' }}
              showSearch
              value={value}
              placeholder="请输入供应商名称"
              defaultActiveFirstOption={false}
              showArrow={false}
              filterOption={false}
              onSearch={handleSearch}
              onChange={handleChange}
              notFoundContent={loading ? '加载中...' : 'Not Data'}
            >
              {options}
            </Select>
          </Form.Item>
          <Form.Item {...FormItemLayout} colon={false}>
            <div className={styles.itemDescription}>
              此信息用于备货时，与供应商确认您的信息
            </div>
          </Form.Item>
          <Form.Item
            label="联系人"
            name="realName"
            rules={[{ required: true, message: '请输入联系人!' }]}
          >
            <Input
              style={{ width: '300px' }}
              disabled
              addonAfter={
                userInfo.realName && userInfo.userPhone ? (
                  ''
                ) : (
                  <Button
                    onClick={personageClick}
                    //   className="item-button"
                    type="primary"
                  >
                    去认证
                  </Button>
                )
              }
            />
          </Form.Item>
          <Form.Item
            label="联系方式"
            name="userPhone"
            rules={[{ required: true, message: '请输入联系方式!' }]}
          >
            <Input style={{ width: '300px' }} disabled />
          </Form.Item>
          <Form.Item {...FormItemLayout} colon={false}>
            <div className={styles.itemDescription}>
              请确保还款规则与签订合同内容保持一致，逾期不还款将直接影响您的正常交易
            </div>
          </Form.Item>
          <Form.Item
            label="授信金额（元）"
            name="quota"
            rules={[
              { required: true, message: '请输入授信金额!' },
              {
                pattern: /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/,
                message: '金额需大于零，且不超过两位小数',
              },
              ({ getFieldValue }) => ({
                validator(rule, value) {
                  if (value && value > 100000000) {
                    return Promise.reject('授信金额不能超过1亿');
                  }
                  return Promise.resolve();
                },
              }),
            ]}
          >
            <Input
              style={{ width: '300px' }}
              placeholder="请输入授信金额,最大不超过1亿"
            />
          </Form.Item>
          <Form.Item
            label="授信时间（天）"
            name="timePeriod"
            rules={[
              { required: true, message: '请输入授信时间!' },
              ({ getFieldValue }) => ({
                validator(rule, value) {
                  if ((value && value < 7) || (value && value > 360)) {
                    return Promise.reject('授信时间不能超过360天和不能小于7天');
                  }
                  return Promise.resolve();
                },
              }),
            ]}
          >
            <Input
              style={{ width: '300px' }}
              placeholder="请输入授信天数,最大不超过360天"
            />
          </Form.Item>
          <Form.Item
            label="期初金额（元）"
            name="startAmount"
            rules={[
              ({ getFieldValue }) => ({
                validator(rule, value) {
                  const quotaVal = getFieldValue('quota');
                  if (value && value >= quotaVal) {
                    return Promise.reject('期初金额必须小于授信金额');
                  }
                  return Promise.resolve();
                },
              }),
            ]}
          >
            <InputNumber
              step={0.01}
              precision={2}
              style={{ width: '300px' }}
              placeholder="期初金额将负数计入首期待还账单"
            />
          </Form.Item>
          <Form.Item {...tailFormItemLayout} colon={false}>
            <div className={styles.periodTips}>
              <Alert
                message="注意：账期出账后5天内必需还清"
                type="warning"
                showIcon
              />
            </div>
          </Form.Item>
          <Form.Item
            name="agreement"
            valuePropName="checked"
            rules={[
              {
                validator: (_, value) =>
                  value
                    ? Promise.resolve()
                    : Promise.reject(new Error('同意账期条款内容')),
              },
            ]}
            {...tailFormItemLayout}
          >
            <Radio>
              我已阅读并同意账期条款内容
              <a onClick={() => setShowContent(true)}>《账期条款内容》</a>
            </Radio>
          </Form.Item>
        </Form>
        <CommonLoading loading={loading} />
      </CommonModal>
      <CommonModal
        className={styles.contentModal}
        title="账期条款"
        visible={showContent}
        footer={[
          <Button
            onClick={() => setShowContent(false)}
            key="confirm"
            type="primary"
          >
            确定
          </Button>,
        ]}
        onCancel={() => setShowContent(false)}
        width={800}
      >
        <h3 className={styles.contentTitle}>平台记账服务条款内容</h3>
        <p>
          鉴于：您与供应商已协商一致，并于线下签订有关供货（/账期服务）的协议。{APP_TITLE == '找家纺' ? '南通云尚找家纺电子商务有限公司' : '常熟纺支宝科技有限公司'}（以下称为{APP_TITLE}）为网络服务提供者，为您与供应商双方提供平台记账服务。
        </p>
        <p>
          特别提醒：在您接受{APP_TITLE}平台记账服务之前，请您务必先与供应商于线下签订有关供货（/账期服务）的协议，{APP_TITLE}平台仅提供记账服务，相关数据不作为债权债务的直接凭证。并请您充分阅读本服务条款所有内容，特别是免除或者限制责任的条款，以保障您的合法权益及服务体验。
        </p>
        <p className={styles.mb20}>
          如您对本服务条款及页面提示信息有疑问，请您务必暂停当前操作，您可通过官方咨询，以便我们为您解释和说明。若您继续使用{APP_TITLE}平台记账服务，视为您理解本服务条款及页面提示信息的全部内容，并同意接受其约束。
        </p>
        <h4>平台记账服务内容：</h4>
        <p>
          1、建议您/供应商按{APP_TITLE}平台要求提供并上传合法、真实、完整的债权债务凭证至平台，作为记账的依据，以确保记账数据的准确性，具体凭证包括但不限于：
          <br />
          （1）线下签订的供货（/账期服务）的协议；
          <br />
          （2）货物交付凭证（如提货单、货物签收单、送货回单、收货单、物流单、入库单、对账单等实际交付货物的凭据）；
          <br />
          （3）其他能证明债权债务已发生且真实的权属资料。
        </p>
        <p>
          2、上传债权债务凭证的同时，您可根据实际交易进行记账，包括填写欠付总金额、支付时间等交易信息。记账完成后，由您/供应商在【7】日内对记账数据进行确认，如逾期未确认，则记账失败，需重新记账，因此记账完成后，请及时通知交易对方进行确认。双方对记账数据确认无误后，{APP_TITLE}提供的平台记账服务可真实反映双方的债权债务关系。
        </p>
        <p>
          3、{APP_TITLE}仅提供网络平台信息服务（平台记账服务），不提供账期服务、不代替做信用审查、不受托采购、不受托供货、不受托提供售后服务、不受托付款、不受托收款。您与供应商之间或与第三方之间发生的纠纷，由纠纷各方自行解决，{APP_TITLE}不承担任何责任。
        </p>
        <p>
          4、您有义务维持并更新{APP_TITLE}平台用户的资料，确保其为真实、最新、有效及完整；承诺按约定如实报告影响或可能影响交易对方权益的重大信息。若您提供任何错误、虚假、过时或不完整的资料，或者{APP_TITLE}依其独立判断怀疑资料为错误、虚假、过时或不完整，{APP_TITLE}有权暂停或终止或以其他方式限制您的{APP_TITLE}平台记账账户，并拒绝您使用{APP_TITLE}平台记账服务的部分或全部功能。在此情况下，{APP_TITLE}不承担任何责任，并且您同意负担用户及{APP_TITLE}因此所产生的直接或间接的任何支出或损失。如因您未及时更新基本资料，导致{APP_TITLE}平台记账服务无法提供或提供时发生任何错误，您不得将此作为取消交易或拒绝付款的理由，{APP_TITLE}亦不承担任何责任，所有后果应由您自行承担。
        </p>
        <p>
          5、{APP_TITLE}有权对平台记账用户采取措施防范欺诈行为，发现欺诈行为或违法行为或其他损害其他平台记账用户利益的情形，{APP_TITLE}有权及时终止该记账用户继续使用{APP_TITLE}平台记账服务并要求用户承担{APP_TITLE}因此而导致的一切支出或损失。
        </p>
        <p>
          6、您应在{APP_TITLE}记账服务提醒的支付时间及时支付全部欠付金额给供应商，若超出5天则会认定为逾期，每逾期一天您应按未付金额的万分之三向供应商支付违约金。若一旦发生逾期，您则不能对供应商的商品进行下单，且{APP_TITLE}有权暂停提供您{APP_TITLE}平台记账服务，直至欠付金额全部付清。同时，供应商有权依据债权债务凭证向有关司法机关追究您的法律责任。
        </p>
        <h4>特别约定</h4>
        <p>
          1、请您知晓并同意，{APP_TITLE}平台的消费场景、商品类目，具体页面提示的相关规则由{APP_TITLE}解释为准。
        </p>
        <p>
          2、请您知晓，开通平台记账服务后，在{APP_TITLE}平台提供的记账服务下，真实发生的交易双方为您与供应商，您可以通过{APP_TITLE}查询供应商信息，且任何商品的退换货责任，均由供应商承担。
        </p>
        <p>
          3、您同意授权{APP_TITLE}采集、分析您自愿提供的文件及输入的财务或账务信息并采取合理的保密措施并授权{APP_TITLE}运用该数据进行商业分析。
        </p>
        <p>
          4、您及{APP_TITLE}均对本条款的内容及对本条款的签订、履行等全过程所获知的信息负有保密义务，不得将其泄露给任何第三方。但当司法机关、政府部门或其他监管机构根据有关法律、法规、规章及其他政府规范性文件的规定和程序，要求{APP_TITLE}提供用户信息资料，{APP_TITLE}对据此作出的任何披露，概不承担责任。
        </p>
        <p>
          5、未经{APP_TITLE}及其他权利人明确书面同意，任何人不得以任何商业目的对{APP_TITLE}网站或其任何部分进行复制、复印、仿造、出售、转售、访问、或以其他方式加以利用。
        </p>
        <p>
          6、因不可抗力或服务器死机、网络故障、数据库故障、软件升级或发生自然灾害、战争、恐怖袭击或者其他无法控制的事件等问题造成的服务中断和对用户个人数据及资料造成的损失，{APP_TITLE}不承担任何责任，亦不予赔偿。
        </p>
        <p>
          7、由于中国法律政策的变动或监管机关的要求导致{APP_TITLE}平台记账开展的业务不被中国法律政策、监管机关允许或认可，由此造成的损失由用户自行承担，{APP_TITLE}对此不承担责任。
        </p>
      </CommonModal>
    </>
  );
};

export default ApplyPeriod;
